<template>
  <a-modal :width="600" :title="title" v-model="visible" centered destroyOnClose :maskClosable="false" :confirmLoading="loading" @ok="onSubmit" @cancel="() => (visible = false)">
    <a-spin :delay="100" :spinning="loading">
      <a-form-model ref="sjhtform" :model="form" :rules="rules" :labelCol="lcol" :wrapperCol="wcol" @submit="onSubmit" @submit.native.prevent>
        <a-form-model-item label="父级菜单" prop="pid">
          <span slot="help" style="color:#faad14">不选择任何父级菜单默认为一级菜单</span>
          <a-tree-select v-model="form.pid" allowClear :tree-data="treeData" treeDataSimpleMode placeholder="请选择父级菜单" />
        </a-form-model-item>
        <a-form-model-item label="菜单名称" prop="title">
          <a-input v-model="form.title" allowClear :maxLength="64" placeholder="请输入菜单名称（限64字）" />
        </a-form-model-item>
        <a-form-model-item label="路由名称" prop="name">
          <span slot="help" style="color:#faad14">父级菜单不需要填路由名称</span>
          <a-input v-model="form.name" allowClear :maxLength="64" placeholder="请输入路由名称（限64字）" />
        </a-form-model-item>
        <a-form-model-item label="菜单图标" prop="icon">
          <span slot="help">请输入<a href="https://www.antdv.com/components/icon-cn" target="_blank">图标类型</a>，要求遵循图标的命名规范</span>
          <a-input v-model="form.icon" allowClear :maxLength="64" placeholder="请输入菜单图标（限64字）" />
        </a-form-model-item>
        <a-form-model-item label="打开方式" prop="target">
          <a-select v-model="form.target" allowClear placeholder="请选择打开方式">
            <a-select-option value="">站内跳转</a-select-option>
            <a-select-option value="_blank">打开新窗口</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="url地址" prop="url">
          <a-input v-model="form.url" allowClear :maxLength="500" placeholder="请输入url地址（限500字）" />
        </a-form-model-item>
        <a-row>
          <a-col :span="8" :offset="1">
            <a-form-model-item label="隐藏菜单" prop="hide" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }" style="display:inline-block;width:100%">
              <a-switch v-model="form.hide" checkedChildren="隐藏" unCheckedChildren="关闭" />
            </a-form-model-item>
          </a-col>
          <a-col :span="13">
            <a-form-model-item label="缓存页面" prop="keep" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" style="display:inline-block;width:100%">
              <a-switch v-model="form.keep" checkedChildren="开启" unCheckedChildren="关闭" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item label="备注" prop="remark">
          <a-textarea v-model="form.remark" allowClear :maxLength="512" placeholder="请输入备注（限500字）" :rows="3" />
        </a-form-model-item>

        <input type="submit" v-show="false">
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import { pick } from 'lodash'
import { form } from '@/utils/mixins'
import { TreeSelect } from 'ant-design-vue'
import { SaveMenu } from '@/api/manage/menu'
export default {
  name: 'SjhtMenuForm', //编辑菜单表单
  mixins: [form],
  components: { [TreeSelect.name]: TreeSelect },
  props: {
    parentMenu: {
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  methods: {
    // 打开新建窗口
    create() {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = '新建菜单'
      this.form = {}
    },
    // 打开修改窗口
    update(data) {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = `修改【${data.title}】菜单`
      const dd = pick(data, ['id', 'pid', 'title', 'name', 'icon', 'url', 'target', 'remark'])
      Object.assign(dd, { hide: Boolean(data.hide), keep: Boolean(data.keep) })
      this.form = dd
    },
    // 点击确定
    onSubmit(e) {
      e.preventDefault()
      this.$refs.sjhtform.validate(valid => {
        if (!valid) return false
        const { form } = this
        const who = this.$store.state?.user?.name
        const fd = Object.assign({}, form, {
          hide: form?.hide ? 1 : 0,
          keep: form?.keep ? 1 : 0,
          who
        })
        this.submit(SaveMenu, fd)
      })
    }
  },
  computed: {
    //动态表单验证规则
    rules: function () {
      const ispid = Boolean(this.form.pid)
      return {
        title: [{ required: true, whitespace: true, message: '请输入菜单名称', trigger: 'blur' }],
        // name: [{ required: ispid, whitespace: ispid, message: '请输入路由名称', trigger: 'blur' }],
        icon: [{ required: !ispid, whitespace: !ispid, message: '请输入菜单图标', trigger: 'blur' }]
      }
    },
    treeData: function () {
      // const {
      //   form: { id }
      // } = this
      return this.parentMenu.map(m => ({ id: m.id, pId: m.pid, value: m.id, label: m.title })) //, disabled: m.id == id || m.pid == id
    }
  }
}
</script>